import React from 'react'
import { useState, useEffect } from "react"
import axios from 'axios'
import newsCss from "../css/new.module.css"
import { Link } from "react-router-dom"
function News(props) {
  const [type, settype] = useState("")
  const [data, setdata] = useState([])
  const [len, setlen] = useState(0)
  // 加载更多
  function loadmore() {
    axios("/lyq/infoloadmore", { params: { type: props.myType, len: len } }).then((res) => {
      setdata(res.data)
      setlen(res.data.length)
    })
  }
  useEffect(async () => {
    settype(props.myType);
    await axios("/lyq/news", { params: { type: props.myType } }).then((res) => {
      setdata(res.data);
      setlen(res.data.length)
    })
  }, [props.myType])
  return (
    <div>
      {data.map((item) => {
        if (item.touxiang != null) {
          return (
            <div className={newsCss.box} key={item.infoid}>
              {/* 盒子左边 */}
              <Link key={item.infoid} to={{ pathname: "/info/" + item.infoid }}>
                <div className={newsCss.boxImg}>
                  <img src={item.infoimg} alt="" />
                </div>
              </Link>
              {/* 盒子右边 */}
              <div className={newsCss.boxRight}>
                <Link key={item.infoid} to={{ pathname: "/info/" + item.infoid }}>
                  <h3>{item.title}</h3>
                  <p>{item.content}</p>
                </Link>
                <div className={newsCss.person}>
                  <div className={newsCss.personBottom}>
                    <div className={newsCss.author_and_date}>
                      <div className={newsCss.author}>
                        <img src={item.touxiang} alt="" />
                        <span>{item.author}</span>
                      </div>
                      <div className={newsCss.date}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                          <g fill="none" fillRule="evenodd">
                            <circle cx="8" cy="8" r="7" stroke="#98ADA2" strokeWidth="2" />
                            <path fill="#98ADA2" d="M9 8h2v2H7V5h2v3z" />
                          </g>
                        </svg>
                        <span>{item.time}</span>
                      </div>
                    </div>
                    <div className={newsCss.like_comment_share}>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <path fill="none" fillRule="evenodd" stroke="#0FBC5F" strokeWidth="2" d="M1 1v12.82l3.67-2.717H15V1H1z" />
                      </svg>
                      <span className={newsCss.pinglunCount}>1</span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                        <g fill="none" fillRule="evenodd">
                          <rect width="5" height="7" x="1" y="8" stroke="#0FBC5F" strokeWidth="2" rx="1" />
                          <path stroke="#0FBC5F" strokeWidth="2" d="M6 6v7h7.49l1.267-7H6z" />
                          <path fill="#0FBC5F" d="M9 1c.667.667.667 2 0 4H5c1.074-1.126 1.74-1.926 2-2.402C7.213 2.208 7 1 7 1c.004-1.105 1-1 2 0z" />
                        </g>
                      </svg>
                      <span className={newsCss.dianzanCount}>{item.dianzan}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )
        }
      })}
      {/* 隐藏加载更多 */}
      {len % 10 == 0 && len != 0 ? <div className={newsCss.loadmore} onClick={() => loadmore()}>加载更多</div> : ""}

    </div>
  )
}

export default News
